<template>
	<body-wrap>
		<!-- <top-search @comfirm="search" :formList="formList" :defaultDate="defaultDate"/> -->
		<c-tab class="orderTopTab" @onclick="tabChange" :lists="[{name: '全部',id: 0},{name: '待付款',id: 1},{name: '待服务',id: 2},{name: '已完成',id: 3}]" returnKey="id"/>
		<view class="orderbox">
			<view class="orderItem" v-for="(dt,index) in lists || []" :key="dt.id">
				<view class="shoppingItem">
					<view class="imgbox">
						<image class="img" :src="dt.imageUrl || GOODS_DEFAULT" mode="aspectFill"></image>
					</view>
					<view class="con">
						<view class="title">
							<view class="name">{{dt.goodsName}}</view>
							<view class="price">
								¥<text class="txt">{{dt.unitPrice}}</text>
								<view class="quantity">x{{dt.quantity}}</view>
							</view>
						</view>
						<view class="time">
							<text class="tlabel">购买时间</text>
							<text class="tval">{{dt.updateTime}}</text>
						</view>
					</view>
				</view>
				<view class="itemStatus">
					<view class="btnbox">
						<text class="btn" v-if="dt.orderState==1">待付款</text>
						<text class="btn" v-else-if="dt.orderState==2">待服务</text>
						<text class="btn" v-else-if="dt.orderState==3">已完成</text>
					</view>
				</view>
			</view>
			<empty v-if="lists && lists.length==0"/>
			<uni-load-more :status="status" v-if="lists.length>0"/>
		</view>
	</body-wrap>
</template>

<script>
	import {defineComponent,reactive,toRefs,onMounted,getCurrentInstance,computed} from 'vue'
	import {onLoad,onShow,onPullDownRefresh,onReachBottom} from '@dcloudio/uni-app'
	import { useStore } from 'vuex'
	import bodyWrap from "@/components/bodyWrap/index.vue"
	import {getGoodsOrderList} from '@/api/index.js'
	import {GOODS_DEFAULT} from "@/utils/config.js"
	//import {topSearch} from "@/components/topSearch/topSearch.vue"
	import cTab from "@/components/cTab/cTab.vue"
	import {dateFormat} from "@/utils/common.js"
	import empty from "@/components/empty/empty.vue"
	export default defineComponent({
		components:{
			bodyWrap,
			//topSearch,
			cTab,
			empty
		},
		props:{
		
		},
		setup(props,context) {
			const store = useStore()
			const {proxy} = getCurrentInstance()
			
			const state = reactive({
				imgUrlPrefix:getApp().globalData.imgUrlPrefix,
				pageNumber:1,
				pageSize:12,
				searchData:{},
				lists:'',
				total:0,
				status:'loading',
				st:'',
				defaultDate:[dateFormat('Y-m-d', new Date().getTime() - (86400 * 90) * 1000),dateFormat('Y-m-d', new Date().getTime())],
				formList:[
					{
						label:'商品名称',
						inputType:'text',
						key:'goodsName'
					},
					{
						label:'会员电话',
						inputType:'text',
						key:'memberPhone'
					},
					{
						label:'是否自提',
						inputType:'radio',
						key:'selfServiceFlag',
						lists:[{text: '是',value: 1},{text: '否',value: 2}],
						defaultValue:1
					},
					{
						label:'商品状态',
						inputType:'select',
						key:'orderState',
						lists:[{text: '待付款',id: 1},{text: '待服务',id: 2},{text: '已完成',id: 3}],
						text:'text', // 下拉显示的名称
						name:'id' // 下拉选择后的值
					},
				]
			})
			
			onPullDownRefresh(()=>{
				clearTimeout(state.st)
				state.pageNumber = 1
				state.status = 'loading'
				state.total = 0
				state.lists = ''
				getList()
				state.st = setTimeout(()=>{
					uni.stopPullDownRefresh();
				},1000)
			})
			onReachBottom(()=>{
				clearTimeout(state.st)
				if(state.status == 'loading'){
					state.pageNumber++
					state.st = setTimeout(()=>{
						getList()
					},1000)
				}
			})
			
			onMounted(()=>{
				getList()
			})
			
			const getList = ()=>{
				getGoodsOrderList({
					pageNumber:state.pageNumber,
					pageSize:state.pageSize,
					...state.searchData
				}).then(res =>{
					if(res.code !=0) return
					if(state.lists){
						state.lists = [...state.lists,...res.data.list]
					}else{
						state.lists = res.data.list || []
					}
					state.total = res.data.total
					if(state.lists.length>=state.total){
						state.status = 'noMore' // 加载完
					}
				})
			}
			
			const search = (obj)=>{
				state.searchData = obj
				state.pageNumber = 1
				state.status = 'loading'
				state.total = 0
				state.lists = ''
				getList()
			}
			
			const tabChange = (orderState)=>{
				console.log("orderState:",orderState)
				search({orderState})
			}

			return {
				...toRefs(state),
				GOODS_DEFAULT,
				search,
				tabChange
			}
		}
	})
</script>

<style lang="scss" scoped>
	.orderbox{
		box-sizing: border-box;
		width: 100%;
		//padding:120rpx 20rpx 20rpx 20rpx;
		//padding:20rpx;
		padding:100rpx 20rpx 20rpx 20rpx;
		.orderItem{
			box-sizing: border-box;
			width: 100%;
			border-radius: 20rpx;
			overflow: hidden;
			background: #fff;
			padding: 20rpx;
			&+.orderItem{
				margin-top: 30rpx;
			}
			.shoppingItem{
				display: flex;
				&+.shoppingItem{
					margin-top: 30rpx;
				}
				.imgbox{
					width: 150rpx;
					height: 150rpx;
					overflow: hidden;
					border-radius: 20rpx;
					background: #666;
					.img{
						display: block;
						width: 100%;
						height: 100%;
					}
				}
				.con{
					flex: 1;
					padding: 0 0 0 20rpx;
					.title{
						display: flex;
						padding: 10rpx 0 0 0;
						.name{
							flex: 1;
							font-size: 30rpx;
							font-weight: bold;
						}
						.price{
							font-size: 26rpx;
							line-height: 40rpx;
							.txt{
								font-size: 34rpx;
								font-weight: bold;
							}
							.quantity{
								color: #949494;
								font-size: 26rpx;
								text-align: right;
								font-weight: bold;
							}
						}
					}
					.time{
						display: flex;
						font-size: 26rpx;
						content: #919191;
						padding: 10rpx 0 0 0;
						.tlabel{
							flex: 1;
						}
					}
				}
			}
			.itemStatus{
				display: flex;
				align-items: center;
				font-size: 26rpx;
				margin: 20rpx 0 0 0;
				.btnbox{
					display: flex;
					flex: 1;
					justify-content: flex-end;
					.btn{
						height: 50rpx;
						line-height: 50rpx;
						border-radius: 25rpx;
						//border: 1px solid #f99a14;
						padding: 0 20rpx;
						font-size: 30rpx;
						color: #f99a14;
					}
				}
			}
		}
	}
</style>
<style lang="scss">
	.orderTopTab{
		.tabWrap{
			position: fixed;
			z-index: 10;
			width: 100%;
			left: 0;
			top: var(--window-top);
			background: #fff;
			box-shadow: 0 0 10rpx #999;
		}
	}
</style>